<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-spin :spinning="spinning">
      <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="接收人">
            <a-radio-group v-model="form.type">
              <a-radio :value="3">全体学员</a-radio>
              <a-radio :value="1">按学员</a-radio>
              <a-radio :value="2">按班级</a-radio>
            </a-radio-group>
            <div v-if="form.type == 1">
              <a-button @click="showStudent">选择学员</a-button>
              <span v-if="studentInfo.length==0">
                已选择
                <span class="primaryCOLOR">0&nbsp;</span>人
              </span> 
              <span v-else class="longestText">
                已选择
                <span class="overFlowHidden">
                  <span v-for="(item,index) in studentInfo" :key="index">
                    {{
                    item.name}}
                    <span v-if="index!==studentInfo.length-1">，</span>
                  </span>
                </span>
                等&nbsp;{{studentInfo.length}}&nbsp;人
              </span>
            </div>
            <div v-if="form.type == 2">
              <a-button @click="showClass">选择班级</a-button>
              <span v-if="classInfo.length==0">
                已选择
                <span class="primaryCOLOR">0&nbsp;</span>个班级
              </span>
              <span v-else class="longestText">
                已选择
                <span class="overFlowHidden">
                  <span v-for="(item,index) in classInfo" :key="index">
                    {{
                    item.name}}
                    <span v-if="index!==classInfo.length-1">，</span>
                  </span>
                </span>
                等&nbsp;{{classInfo.length}}&nbsp;个班级
              </span>
            </div>
          </a-form-model-item>
          <a-form-model-item label="标题">
            <a-input v-model="form.title" style="width:400px;" />
          </a-form-model-item>
          <!-- <a-form-model-item label="模板">
            <a-button>模板库</a-button>
          </a-form-model-item>-->
          <a-form-model-item label="内容">
            <div>
              <uEditor v-model="form.content"></uEditor>
            </div>
          </a-form-model-item>
          <a-form-model-item label="家长确认">
            <a-switch v-model="form.open_parent_confirm" />
            <span
              style="color: rgb(161, 161, 164);margin-left: 8px!important;"
            >开启后，家长端接收到的通知会增加“确认收到”的操作</span>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit">发送</a-button>
            <a-button style="margin-left: 10px;" @click="showPreview">预览</a-button>
          </a-form-model-item>
        </a-form-model>
        <student-model ref="studentM" @reload="studentModelReturnData" :studentArr="studentIDs"></student-model>
        <class-model ref="classM" @reload="classModelReturnData" :classArr="classIDs"></class-model>
      </a-card>
      <div class="popContainer" v-if="visible">
        <div class="previewContent">
          <div class="closePreview" @click="closePreview">
            <a-icon type="close" style="font-size:50px" />
          </div>
          <div class="previewContent">
            <div class="previewTitle">{{form.title}}</div>
            <div class="previewUser">
              <div class="previewSchoolName">{{school_name}}</div>
              <div class="previewDate" style="color: #b0b0b0;">{{nowDate}}</div>
            </div>
            <div class="previewDividing"></div>
            <div class="previewDesc" v-html="form.content"></div>
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>
<script>
import uEditor from '@/components/ueditor'
import topNavBar from '@/components/topNavBar/topNavBar'
import studentModel from '@/components/student'
import classModel from '@/components/class'
import { sendMsg } from '@/api/student'
export default {
  components: { uEditor, topNavBar, studentModel, classModel },
  data() {
    return {
      // 表单数据
      classInfo: [],
      spinning: false, //loading
      classIDs: [],
      studentInfo: [],
      studentIDs: [],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        school_id: this.$store.state.user.school,
        title: '',
        open_parent_confirm: false,
        type: 3, //1学员 2班级 3全员
        project_ids: '',
        content: ''
      },
      //预览
      visible: false,
      school_name: '',
      nowDate: '',
      nowRouteTitle: '' //顶部操作栏
    }
  },
  created() {
    if (this.$route.query.id && this.$route.query.name) {
      this.studentIDs.push(this.$route.query.id)
      this.studentInfo.push({ id: this.$route.query.id, name: this.$route.query.name })
      this.form.type = 1
    }
    this.nowRouteTitle = this.$route.meta.title
    this.school_name = this.$store.state.user.school_name
    let date = new Date()
    this.nowDate = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate()
  },
  methods: {
    onSubmit() {
      let params = JSON.parse(JSON.stringify(this.form))
      if (this.form.type == 1) {
        if (this.studentIDs.length == 0) {
          this.$message.error('请选择接收人')
          return
        } else {
          params.project_ids = this.studentIDs
        }
      } else if (this.form.type == 2) {
        if (this.classIDs.length == 0) {
          this.$message.error('请选择接收班级')
          return
        } else {
          params.project_ids = this.classIDs
        }
      }
      if (!this.form.title) {
        this.$message.error('请输入标题')
        return
      }
      if (!this.form.content) {
        this.$message.error('请填写内容')
        return
      }
      this.spinning = true
      if (this.form.open_parent_confirm == false) {
        params.open_parent_confirm = 2
      } else {
        params.open_parent_confirm = 1
      }
      sendMsg(params)
        .then(res => {
          this.spinning = false
          this.$message.success('发送消息成功')
          this.back()
        })
        .catch(err => {
          this.spinning = false
          this.$message.error(err.data.message || '发送消息失败，请重试')
        })
    },
    back() {
      this.$router.go(-1)
    },
    showStudent() {
      this.$refs.studentM.showModel()
    },
    showClass() {
      this.$refs.classM.showModel()
    },
    studentModelReturnData(e) {
      //学生组件返回数据
      let arr = []
      e.forEach(val => {
        arr.push(val.id)
      })
      this.studentIDs = arr
      this.studentInfo = e
    },
    classModelReturnData(e) {
      let arr = []
      e.forEach(val => {
        arr.push(val.id)
      })
      this.classIDs = arr
      this.classInfo = e
    },

    //开启预览
    showPreview() {
      if (!this.form.title) {
        this.$message.error('请输入标题')
        return
      }
      if (!this.form.content) {
        this.$message.error('请填写内容')
        return
      }
      this.visible = true
    },
    //关闭预览
    closePreview() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.longestText {
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  .overFlowHidden {
    display: inline-block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    top: -1px;
  }
}

.primaryCOLOR {
  color: #1890ff;
}
.popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  .previewContent {
    background: url('~@/assets/messageBgImg.png') center center no-repeat;
    background-size: 90% 90%;
    width: 350px;
    height: 700px;
    position: relative;
    top: 10%;
    margin: 0 auto;
    .previewContent {
      background: #fff;
      width: 268px;
      height: 473px;
      border-radius: 1%;
      position: absolute;
      left: 2px;
      right: 0;
      top: 114px;
      overflow-x: hidden;
      padding: 0 10px;
      overflow-y: auto;
      .previewTitle {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 900;
      }
      .previewUser {
        margin: 5px 0;
        .previewSchoolName {
          font-weight: 900;
          margin-bottom: 8px;
        }
      }
      .previewDividing {
        height: 1px;
        margin-bottom: 20px;
        background-color: #e8e8e8;
      }
      .previewDesc {
        margin-top: 5px;
        font-size: 12px;
        color: #b0b0b0;
      }
    }
    .closePreview {
      color: white;
      right: -50px;
      position: absolute;
      top: 20px;
      cursor: pointer;
    }
  }
}
</style>